import React, { useState } from "react";
import MenuItems from "../MenuItems/index";
import "../../theme/nav.css";
import { styled } from "styled-components";
import { Image, Input, Skeleton, Space } from "antd";
import { useNavigate } from "react-router-dom";
const { Search } = Input;
import logo from "@/assets/images/common/logo.png";
import { IconButton, Iconify } from "../Icon";
import icon from "@/assets/react.svg"
import { PhoneTwoTone } from "@ant-design/icons";
import { TypeAnimation } from 'react-type-animation';
interface propsType {
  children?: []
}

const SearchInput = styled(Search)`
  width: 300px;
`;

export const TypeIntro = () => {
  return (
    <TypeAnimation
      cursor={false}
      className="text-blue-500 text-2xl cursor-pointer after:content-none"
      sequence={[
        1000,
        '17391900505',
      ]}
      speed={10}
    />
  );
};

const HeaderBox = styled.div`
  display: flex;
  align-items: center;
  justify-content: start;
  .phone{
    font-size: 26px;
    font-weight: bold;
    margin-top: 12px;
  }
`

type SizeType = 'default' | 'small' | 'large';

const ImageSkeleton = () => {
  const [size, setSize] = useState<SizeType>('large');
  return (
    <div className="flex items-center">
      <Space align="start" size="large">
        <Skeleton.Button active={true} size={size} />
        <Skeleton.Button active={true} size={size} />
        <Skeleton.Button active={true} size={size} />
        <Skeleton.Button active={true} size={size} />
        <Skeleton.Button active={true} size={size} />
        <Skeleton.Button active={true} size={size} />
        <Skeleton.Button active={true} size={size} />
      </Space>

    </div>
  )
}

const Navbar: React.FC<propsType> = ({ children }) => {
  const negative = useNavigate();
  const onSearch = (e: any) => {
    // todo 去搜索商品页面
    negative("/search", { replace: false, state: { query: e } });
  };
  return (
    <nav className="flex box-border justify-center flex-col bg-white fixed top-0 w-full z-20" style={{ height: '158px' }}>
      <div className="w-1200px mr-auto ml-auto">
        <HeaderBox className="">
          <img className="logo bg-white" src={logo}></img>
          <SearchInput
            enterButton="搜索"
            placeholder="请输入"
            onSearch={onSearch}
            size="large"
            className="ml-20"
          />
          <div className="flex ml-20 items-center">
            <PhoneTwoTone className="mr-2" style={{ fontSize: "40px" }} />
            <div className="">
              <div className="text-black text-xl">咨询热线：</div>
              {/* <div className="text-blue-500 text-2xl cursor-pointer">17391900505</div> */}
              <TypeIntro></TypeIntro>
            </div>
          </div>
        </HeaderBox>
        {
          <ul className="menus mr-auto ml-auto flex items-center mt-5">
            {children?.length === 0 ? <ImageSkeleton></ImageSkeleton> : children?.map((menu: any, index: number) => {
              const depthLevel = 0;
              return (
                <MenuItems items={menu} key={index} depthLevel={depthLevel} />
              );
            })}
          </ul>
        }
      </div>

    </nav>
  );
};

export default Navbar;
